<template>
	<el-main class="bg table_wrap comtabel_t">
		<el-form label-position="right" :model="query" class="form p_4" label-width="120">
			<el-row class="rows row1">



							<el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
					<el-form-item label="球员姓名">
									<el-input v-model="query.player_name"></el-input>
								</el-form-item>
				</el-col>
															<el-col :xs="24" :sm="24" :lg="8" class="el_form_search_wrap">
					<el-form-item label="所在球队">
									<el-input v-model="query.team"></el-input>
								</el-form-item>
				</el-col>
																																																																															</el-row>
	<el-row class="rows row2">

		<el-col :xs="24" :sm="24" :lg="24" class="search_btn_wrap search_btns">

				<el-col :xs="24" :sm="10" :lg="8" class="search_btn_1 search_btn_wrap_1 btns">

										<el-button type="primary" @click="search()" class="search_btn_find">查询</el-button>
						<el-button @click="reset()" style="margin-right: 74px;" class="search_btn_reset">重置</el-button>
																		

						<el-button v-if="user_group == '管理员' || $check_action('/data_information/table','del') || $check_action('/data_information/view','del')" class="search_btn_del" type="danger" @click="delInfo()">删除</el-button>
										<download-excel v-if="$check_option('/data_information/table','import_db')" class="export-excel-wrapper" :data="DetailsForm" :fields="json_fields" name="数据导入表格.xls" >
							<el-button type="success">下载导入文档</el-button>
						</download-excel>
						<el-upload v-if="$check_option('/data_information/table','import_db')" action accept = ".xlsx, .xls" :auto-upload="false" :show-file-list="false" :on-change="handle_import">
							<el-button type="primary">导入</el-button>
						</el-upload>
								
				</el-col>
		</el-col>
	</el-row >

		</el-form>
		<el-table :data="list" @selection-change="selectionChange" @sort-change="$sortChange" style="width: 100%" id="dataTable">
			<el-table-column fixed type="selection" tooltip-effect="dark" width="55">
			</el-table-column>
				<el-table-column prop="player_name" @sort-change="$sortChange" label="球员姓名"
				v-if="user_group == '管理员' || $check_field('get','player_name')" min-width="200">
					</el-table-column>
					<el-table-column prop="player_position" @sort-change="$sortChange" label="球员位置"
				v-if="user_group == '管理员' || $check_field('get','player_position')" min-width="200">
					</el-table-column>
					<el-table-column prop="player_age" @sort-change="$sortChange" label="球员年龄"
				v-if="user_group == '管理员' || $check_field('get','player_age')" min-width="200">
					</el-table-column>
					<el-table-column prop="team" @sort-change="$sortChange" label="所在球队"
				v-if="user_group == '管理员' || $check_field('get','team')" min-width="200">
					</el-table-column>
					<el-table-column prop="games_played" @sort-change="$sortChange" label="出场次数"
				v-if="user_group == '管理员' || $check_field('get','games_played')" min-width="200">
					</el-table-column>
					<el-table-column prop="number_of_first_releases" @sort-change="$sortChange" label="首发次数"
				v-if="user_group == '管理员' || $check_field('get','number_of_first_releases')" min-width="200">
					</el-table-column>
					<el-table-column prop="time_of_appearance" @sort-change="$sortChange" label="出场时间"
				v-if="user_group == '管理员' || $check_field('get','time_of_appearance')" min-width="200">
					</el-table-column>
					<el-table-column prop="hit_counts" @sort-change="$sortChange" label="命中次数"
				v-if="user_group == '管理员' || $check_field('get','hit_counts')" min-width="200">
					</el-table-column>
					<el-table-column prop="shooting_frequency" @sort-change="$sortChange" label="投篮次数"
				v-if="user_group == '管理员' || $check_field('get','shooting_frequency')" min-width="200">
					</el-table-column>
					<el-table-column prop="shooting_percentage" @sort-change="$sortChange" label="投篮命中率"
				v-if="user_group == '管理员' || $check_field('get','shooting_percentage')" min-width="200">
					</el-table-column>
					<el-table-column prop="triple_hit_count" @sort-change="$sortChange" label="三分命中数"
				v-if="user_group == '管理员' || $check_field('get','triple_hit_count')" min-width="200">
					</el-table-column>
					<el-table-column prop="triple_output_count" @sort-change="$sortChange" label="三分出手数"
				v-if="user_group == '管理员' || $check_field('get','triple_output_count')" min-width="200">
					</el-table-column>
					<el-table-column prop="three_point_hit_rate" @sort-change="$sortChange" label="三分命中率"
				v-if="user_group == '管理员' || $check_field('get','three_point_hit_rate')" min-width="200">
					</el-table-column>
					<el-table-column prop="two_point_hit_count" @sort-change="$sortChange" label="两分命中数"
				v-if="user_group == '管理员' || $check_field('get','two_point_hit_count')" min-width="200">
					</el-table-column>
					<el-table-column prop="two_split_hand_count" @sort-change="$sortChange" label="两分出手数"
				v-if="user_group == '管理员' || $check_field('get','two_split_hand_count')" min-width="200">
					</el-table-column>
					<el-table-column prop="two_point_hit_rate" @sort-change="$sortChange" label="两分命中率"
				v-if="user_group == '管理员' || $check_field('get','two_point_hit_rate')" min-width="200">
					</el-table-column>
					<el-table-column prop="effective_hit_rate" @sort-change="$sortChange" label="有效命中率"
				v-if="user_group == '管理员' || $check_field('get','effective_hit_rate')" min-width="200">
					</el-table-column>
					<el-table-column prop="free_throws_made" @sort-change="$sortChange" label="罚球命中数"
				v-if="user_group == '管理员' || $check_field('get','free_throws_made')" min-width="200">
					</el-table-column>
					<el-table-column prop="free_throw_shots" @sort-change="$sortChange" label="罚球出手数"
				v-if="user_group == '管理员' || $check_field('get','free_throw_shots')" min-width="200">
					</el-table-column>
					<el-table-column prop="free_throw_percentage" @sort-change="$sortChange" label="罚球命中率"
				v-if="user_group == '管理员' || $check_field('get','free_throw_percentage')" min-width="200">
					</el-table-column>
					<el-table-column prop="front_court_rebounds" @sort-change="$sortChange" label="前场篮板数"
				v-if="user_group == '管理员' || $check_field('get','front_court_rebounds')" min-width="200">
					</el-table-column>
					<el-table-column prop="backcourt_rebounds" @sort-change="$sortChange" label="后场篮板数"
				v-if="user_group == '管理员' || $check_field('get','backcourt_rebounds')" min-width="200">
					</el-table-column>
					<el-table-column prop="total_number_of_rebounds" @sort-change="$sortChange" label="篮板总数"
				v-if="user_group == '管理员' || $check_field('get','total_number_of_rebounds')" min-width="200">
					</el-table-column>
					<el-table-column prop="number_of_assists" @sort-change="$sortChange" label="助攻次数"
				v-if="user_group == '管理员' || $check_field('get','number_of_assists')" min-width="200">
					</el-table-column>
					<el-table-column prop="number_of_steals" @sort-change="$sortChange" label="抢断次数"
				v-if="user_group == '管理员' || $check_field('get','number_of_steals')" min-width="200">
					</el-table-column>
					<el-table-column prop="blocked_shots" @sort-change="$sortChange" label="盖帽次数"
				v-if="user_group == '管理员' || $check_field('get','blocked_shots')" min-width="200">
					</el-table-column>
					<el-table-column prop="number_of_errors" @sort-change="$sortChange" label="失误次数"
				v-if="user_group == '管理员' || $check_field('get','number_of_errors')" min-width="200">
					</el-table-column>
					<el-table-column prop="number_of_fouls_committed" @sort-change="$sortChange" label="犯规次数"
				v-if="user_group == '管理员' || $check_field('get','number_of_fouls_committed')" min-width="200">
					</el-table-column>
					<el-table-column prop="total_score" @sort-change="$sortChange" label="总得分"
				v-if="user_group == '管理员' || $check_field('get','total_score')" min-width="200">
					</el-table-column>
	



            <el-table-column sortable prop="create_time" label="创建时间" min-width="200">
                <template slot-scope="scope">
                	{{ $toTime(scope.row["create_time"],"yyyy-MM-dd hh:mm:ss") }}
                </template>
            </el-table-column>

			<el-table-column sortable prop="update_time" label="更新时间" min-width="200">
                <template slot-scope="scope">
                	{{ $toTime(scope.row["update_time"],"yyyy-MM-dd hh:mm:ss") }}
                </template>
			</el-table-column>







			<el-table-column fixed="right" label="操作" min-width="200" v-if="user_group == '管理员' || $check_action('/data_information/table','set') || $check_action('/data_information/view','set') || $check_action('/data_information/view','get') || $check_action('/得分分析|篮板分析|助攻分析|盖帽分析|抢断分析|三分分析|两分分析/table','add') || $check_action('/得分分析|篮板分析|助攻分析|盖帽分析|抢断分析|三分分析|两分分析/view','add')" >


				<template slot-scope="scope">
					<div class="view_a">
					<router-link class="e-button el-button--small is-plain el-button--success" style="margin: 5px !important;"
					v-if="user_group == '管理员' || $check_action('/data_information/table','set') || $check_action('/data_information/view','set') || $check_action('/data_information/view','get')"
						:to="'./view?' + field + '=' + scope.row[field]"
						 size="small">
						<span>详情</span>
					</router-link>
						<!--跨表按钮-->
							<el-button class="e-button el-button--small is-plain el-button--default" style="margin: 5px !important;" size="small" @click="to_table(scope.row,'/score_analysis/view')" v-if="user_group == '管理员' || $check_action('/score_analysis/table','add') || $check_action('/score_analysis/view','add')">
						<span>得分分析</span>
					</el-button>
							<el-button class="e-button el-button--small is-plain el-button--default" style="margin: 5px !important;" size="small" @click="to_table(scope.row,'/backboard_analysis/view')" v-if="user_group == '管理员' || $check_action('/backboard_analysis/table','add') || $check_action('/backboard_analysis/view','add')">
						<span>篮板分析</span>
					</el-button>
							<el-button class="e-button el-button--small is-plain el-button--default" style="margin: 5px !important;" size="small" @click="to_table(scope.row,'/assist_analysis/view')" v-if="user_group == '管理员' || $check_action('/assist_analysis/table','add') || $check_action('/assist_analysis/view','add')">
						<span>助攻分析</span>
					</el-button>
							<el-button class="e-button el-button--small is-plain el-button--default" style="margin: 5px !important;" size="small" @click="to_table(scope.row,'/cap_analysis/view')" v-if="user_group == '管理员' || $check_action('/cap_analysis/table','add') || $check_action('/cap_analysis/view','add')">
						<span>盖帽分析</span>
					</el-button>
							<el-button class="e-button el-button--small is-plain el-button--default" style="margin: 5px !important;" size="small" @click="to_table(scope.row,'/preemptive_analysis/view')" v-if="user_group == '管理员' || $check_action('/preemptive_analysis/table','add') || $check_action('/preemptive_analysis/view','add')">
						<span>抢断分析</span>
					</el-button>
							<el-button class="e-button el-button--small is-plain el-button--default" style="margin: 5px !important;" size="small" @click="to_table(scope.row,'/three_point_analysis_of_the_team/view')" v-if="user_group == '管理员' || $check_action('/three_point_analysis_of_the_team/table','add') || $check_action('/three_point_analysis_of_the_team/view','add')">
						<span>三分分析</span>
					</el-button>
							<el-button class="e-button el-button--small is-plain el-button--default" style="margin: 5px !important;" size="small" @click="to_table(scope.row,'/team_two_point_analysis/view')" v-if="user_group == '管理员' || $check_action('/team_two_point_analysis/table','add') || $check_action('/team_two_point_analysis/view','add')">
						<span>两分分析</span>
					</el-button>
							</div>
				</template>
			</el-table-column>

		</el-table>

		<!-- 分页器 -->
		<div class="mt text_center">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="query.page" :page-sizes="[7, 10, 30, 100]" :page-size="query.size"
				layout="total, sizes, prev, pager, next, jumper" :total="count">
			</el-pagination>
		</div>
		<!-- /分页器 -->

																													
		<div class="modal_wrap" v-if="showModal">
			<div class="modal_box">
				<!-- <div class="modal_box_close" @click="closeModal">X</div> -->
				<p class="modal_box_title">重要提醒</p>
				<p class="modal_box_text">当前有数据达到预警值！</p>
				<div class="btn_box">
					<span @click="closeModal">取消</span>
					<span @click="closeModal">确定</span>
				</div>
			</div>
		</div>


	</el-main>
</template>
<script>
	import mixin from "@/mixins/page.js";
	import * as XLSX from 'xlsx/xlsx.mjs'

	export default {
		mixins: [mixin],
		data() {
			return {
				// 弹框
				showModal: false,
				// 获取数据地址
				url_get_list: "~/api/data_information/get_list?like=0",
				url_del: "~/api/data_information/del?",

				// 字段ID
				field: "data_information_id",

				// 查询
				query: {
					"size": 7,
					"page": 1,
								"player_name": "",
													"team": "",
																																	"login_time": "",
					"create_time": "",
					"orderby": `create_time desc`
				},

				// 数据
				list: [],
				json_fields: {
							"球员姓名":'player_name',
						"球员位置":'player_position',
						"球员年龄":'player_age',
						"所在球队":'team',
						"出场次数":'games_played',
						"首发次数":'number_of_first_releases',
						"出场时间":'time_of_appearance',
						"命中次数":'hit_counts',
						"投篮次数":'shooting_frequency',
						"投篮命中率":'shooting_percentage',
						"三分命中数":'triple_hit_count',
						"三分出手数":'triple_output_count',
						"三分命中率":'three_point_hit_rate',
						"两分命中数":'two_point_hit_count',
						"两分出手数":'two_split_hand_count',
						"两分命中率":'two_point_hit_rate',
						"有效命中率":'effective_hit_rate',
						"罚球命中数":'free_throws_made',
						"罚球出手数":'free_throw_shots',
						"罚球命中率":'free_throw_percentage',
						"前场篮板数":'front_court_rebounds',
						"后场篮板数":'backcourt_rebounds',
						"篮板总数":'total_number_of_rebounds',
						"助攻次数":'number_of_assists',
						"抢断次数":'number_of_steals',
						"盖帽次数":'blocked_shots',
						"失误次数":'number_of_errors',
						"犯规次数":'number_of_fouls_committed',
						"总得分":'total_score',
					},
				DetailsForm: [
					{
								player_name:"文本类型",
							player_position:"文本类型",
							player_age:"文本类型",
							team:"文本类型",
							games_played:"数字类型",
							number_of_first_releases:"数字类型",
							time_of_appearance:"文本类型",
							hit_counts:"数字类型",
							shooting_frequency:"数字类型",
							shooting_percentage:"文本类型",
							triple_hit_count:"数字类型",
							triple_output_count:"数字类型",
							three_point_hit_rate:"文本类型",
							two_point_hit_count:"数字类型",
							two_split_hand_count:"数字类型",
							two_point_hit_rate:"文本类型",
							effective_hit_rate:"文本类型",
							free_throws_made:"数字类型",
							free_throw_shots:"数字类型",
							free_throw_percentage:"文本类型",
							front_court_rebounds:"数字类型",
							backcourt_rebounds:"数字类型",
							total_number_of_rebounds:"数字类型",
							number_of_assists:"数字类型",
							number_of_steals:"数字类型",
							blocked_shots:"数字类型",
							number_of_errors:"数字类型",
							number_of_fouls_committed:"数字类型",
							total_score:"数字类型",
						},
				],
																																																																																										}
		},
		methods: {
			// 关闭弹框
			closeModal(){
				this.showModal = false;
				},


																																																										


	/**
	 * 导入
	 */
	readFile(file){//文件读取
		return new Promise(resolve => {
			let reader = new FileReader();
			reader.readAsBinaryString(file);//以二进制的方式读取
			reader.onload = ev =>{
				resolve(ev.target.result);
			}
		})
	},
	async handle_import(ev){
		let file = ev.raw;
		console.log(file)
		if(!file){
			console.log("文件打开失败")
			return ;
		}else{
			let data = await this.readFile(file);
			let workbook = XLSX.read(data,{ type: "binary"});//解析二进制格式数据
			let worksheet = workbook.Sheets[workbook.SheetNames[0]];//获取第一个Sheet
			let result = XLSX.utils.sheet_to_json(worksheet);//json数据格式
			result.forEach((item) => {
				// 将中文的键名替换成英文的
				for (let k in this.json_fields) {
					let newKey = this.json_fields[k];
					if (newKey) {
						item[newKey] = item[k];
						delete item[k];
					}
				}
			});
			let _this = this;
				for (let i=0;i<result.length;i++){
				let url = "~/api/data_information/add?";
				await this.$post(url, result[i], function (json, status) {
					console.log("提交结果：", json);
					if (json.result) {
						_this.$toast("操作成功", 'success');
					} else if (json.error) {
						_this.$toast(json.error.message, 'danger');
					}
				});
			}
			}
	},

																																																												},
		created() {
																																																												}
	}
</script>

<style type="text/css">
	.bg {
		background: white;
	}

	.form.p_4 {
		padding: 1rem;
	}

	.form .el-input {
		width: initial;
	}

	.mt {
		margin-top: 1rem;
	}

	.text_center {
		text-align: center;
	}

	.float-right {
		float: right;
	}


	.modal_wrap{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0,0,0,0.5);
		z-index: 9999999999;
	}
	.modal_wrap .modal_box{
		width: 400px;
		height: 200px;
		background: url("../../assets/modal_bg.jpg") no-repeat center;
		background-size: cover;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -200px;
		margin-top: -100px;
		border-radius: 10px;
		}
	.modal_wrap .modal_box .modal_box_close{
		font-size: 20px;
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
		}
	.modal_wrap .modal_box .modal_box_title{
	  text-align: center;
    font-size: 18px;
    margin: 16px auto;
    color: #fff;
    border-bottom: 1px solid rgba(117, 116, 116,0.5);
    padding-bottom: 16px;
    width: 356px;
		}
	.modal_wrap .modal_box .modal_box_text{
			text-align: center;
		font-size: 15px;
		color: #fff;
		margin-top: 25px;
		}
	.modal_wrap .modal_box .btn_box{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 42px;
		}
			.modal_wrap .modal_box .btn_box span{
				display: inline-block;
				width: 80px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border: 1px solid #ccc;
				font-size: 14px;
				cursor: pointer;
				color: #fff;
			}
	.modal_wrap .modal_box .btn_box span:nth-child(2){
		background: #409EFF;
		color: #fff;
		border-color: #409EFF;
		margin-left: 15px;
	}
</style>
